<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- 只有在内容这里可以使用mustache语法 -->
    <h2>{{imgUrl}}</h2>
    <!-- 这种写法是错误的，这里不可以使用mustache语法 -->
    <!-- 下面这里直接把{{imgUrl}}当成一个属性值来使用了 -->
    <img src="{{imgUrl}}" alt="">
    <img src="imgUrl" alt="">
    <!-- 正确的做法：使用v-bind指令 -->
    <!-- 会把imgUrl当成一个变量来使用 -->
    <img v-bind:src="imgUrl" alt="">
    <img :src="imgUrl" alt="" :title="title">
    <h1><a :href="aUrl" :title="title">百度一下</a></h1>
  </div>
  <script src="../practice_project/js/vue.js"></script>
  <script>
    const root = new Vue({
      el: '#root',
      data: {
        // 服务器请求来的数据
        imgUrl: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
        aUrl: 'https://www.baidu.com',
        title:'这是一座桥'
      }
    })
  </script>
</body>

</html>